<template>
    <p>组合式API写法</p>
    <p>ref</p>
    <p>count: {{count}}</p>
    <p>test: {{test}}</p>

    <p>reactivde ===========</p>
    <p>obj:{{obj}}</p>
    <p>obj.name:{{obj.name}}</p>
    <p>obj.age:{{obj.age}}</p>
    <p>arr:{{arr}}</p>
    <p>computed</p>
    <p>countAddFive:{{countAddFive}}</p>
    <p>objAgeAddFive:{{objAgeAddFive}}</p>
    <p>methods</p>
    <button @click="countAddOne">count+1</button>
    <button @click="countAddTwo">count+2</button>
    <button @click="updateObj">updateObj</button>

    <p>组件</p>
    <Son :foo="obj.name" :age="obj.age" />
</template>
<script setup>
import {ref,reactive,computed, watch} from 'vue'
import Son from './Son.vue'

const count = ref(10)

const test = ref('hello world')

console.log(count.value)

const obj = reactive({
    name:'liyan',
    age:12
})

const arr = reactive([1,2,3,4,5])

console.log(obj.name)
console.log(obj.age)

const countAddFive = computed(()=>{
    return count.value +5
})

const objAgeAddFive  = computed(()=>{
    return obj.age +5
})

function countAddOne(){
    count.value++
}

const countAddTwo = ()=>{
    count.value+=2
}

const updateObj = ()=>{
    updateObjName()
}

const updateObjName = ()=>{
    obj.name = 'yemunig'
}

watch(count,(newVal,oldVal)=>{
    console.log('count发生了改变')
    console.log('newVal',newVal)
    console.log('oldVal',oldVal)
})

watch(countAddFive,(newVal,oldVal)=>{
    console.log('countAddFive发生了改变')
    console.log('newVal',newVal)
    console.log('oldVal',oldVal)
})

watch(obj,(newVal,oldVal)=>{
    console.log('obj发生了改变')
    console.log('newVal',newVal)
    console.log('oldVal',oldVal)
})

watch(()=>obj.name,(newVal,oldVal)=>{
    console.log('obj.name发生了改变')
    console.log('newVal',newVal)
    console.log('oldVal',oldVal)
})

</script>